<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<ui:composition template="../templates/hub.xhtml">
	<ui:define name="titre">#{lbl['login.password.title']}</ui:define>
	<ui:define name="hub_page">
		<div id="login_div" align="center">

			<script language="javascript">
				function javascriptOnLoad(){
					makeFocusOnField("password_form:password");
				}
			</script>

			<!-- Logo Ecr. -->
			<h:graphicImage value="../../imgs/colas_logo.jpg" width="75" />
			<h:graphicImage value="../../imgs/colas_logo_lines.jpg" />

			<!-- Formulaire de changement de mot de passe. -->
			<h:form id="password_form">
				<rich:panel styleClass="rich_panel" headerClass="rich_panel_head"
					style="width:480px;">
					<f:facet name="header">
						<h:outputText value="#{lbl['login.password.pannel.head']}" />
					</f:facet>

					<h:panelGrid columnClasses="_left" styleClass="panel"
						style="width:460px; height:235px" border="0">

						<rich:messages ajaxRendered="true" layout="list" />

						<h:outputText value="#{lbl['login.password.pannel.text']}"
							escape="false" />
						<h:panelGrid columns="2" columnClasses="_left_top, _left_top"
							border="0">

							<h:graphicImage value="../../imgs/icons/ico_lock.png" />

							<h:panelGrid columns="2" styleClass="panel"
								columnClasses="_left, _right" border="0">

								<h:panelGroup>
									<h:outputText value="#{lbl['login.password']}" /> :
								</h:panelGroup>

								<h:inputSecret id="password" value="#{loginManaged.password}"
									size="25" validator="#{loginManaged.passwordUniqueValidator}"
									maxlength="15" required="true" tabindex="1"
									requiredMessage="#{err['password.required']}">
									<f:validator validatorId="passwordConfirmValidator" />
									<f:validator validatorId="lengthValidator" />
									<f:attribute name="compareTo"
										value="password_form:passwordConfirm" />
									<f:attribute name="minLength" value="5" />
									<f:attribute name="fieldName" value="#{lbl['login.password']}" />
								</h:inputSecret>

								<h:panelGroup>
									<h:outputText value="#{lbl['login.password.confirm']}" /> : 
								</h:panelGroup>

								<h:inputSecret id="passwordConfirm" tabindex="2"
									value="#{loginManaged.passwordConfirm}" size="25"
									maxlength="15" required="true" redisplay="true"
									requiredMessage="#{err['password.confirm.required']}" />

								<h:commandButton id="new_password_b_erase" type="reset"
									value="#{lbl['common.button.erase']}"
									onclick="makeFocusOnField('password_form:password')" />

								<a4j:commandButton id="new_password_b_validate"
									action="#{loginManaged.updatePassword}"
									value="#{lbl['common.button.validate']}" />
							</h:panelGrid>
						</h:panelGrid>
					</h:panelGrid>
				</rich:panel>
			</h:form>
		</div>
	</ui:define>
</ui:composition>
</html>